<template>
  <div class="video">
    <el-card class="box-card">
      <div class="boxcard-head">
        <el-form :model="queryParam" :inline="true" class="demo-form-inline" ref="queryParam">
          <el-form-item label="状态" prop="status">
            <el-select v-model="queryParam.status" placeholder="请选择" clearable>
              <el-option
                v-for="item in videoStatus"
                :key="item.key"
                :label="item.label"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称" prop="title">
            <el-input v-model="queryParam.title" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="分类" prop="categoryId">
            <el-select v-model="queryParam.categoryId" placeholder="请选择" clearable>
              <el-option
                v-for="item in videoType"
                :key="item.key"
                :label="item.label"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否热门" prop="isHot">
            <el-select v-model="queryParam.isHot" placeholder="请选择" clearable>
              <el-option :key="true" label="是" :value="true"></el-option>
              <el-option :key="false" label="否" :value="false"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="look_btn" type="primary" @click="getList">查询</el-button>
            <el-button @click="resetForm('queryParam')">重置</el-button>
            <el-button type="primary" @click="dialogAdd()">新增</el-button>
            <el-button type="primary" @click="dialogVideoIsOpen()">修改是否开启健康讲堂配置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="boxcard-body">
        <el-table
          :data="list"
          border
          style="width: 100%"
          :header-cell-style="{ 'background-color': '#EEEEEE' }"
        >
          <el-table-column type="index" label="排序" width="50"></el-table-column>
          <el-table-column prop="imageUrl" label="视频图片" width="200">
            <template slot-scope="scope">
              <el-image :src="scope.row.imageUrl" style="width:170px;height:80px" :preview-src-list="[scope.row.imageUrl]" />
            </template>
          </el-table-column>
          <el-table-column prop="title" label="视频名称" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="status" label="状态" width="150" show-overflow-tooltip>
            <template slot-scope="scope">{{ getVideoStatus(scope.row.status) }}</template>
          </el-table-column>
          <el-table-column prop="atype" label="视频类型" width="130" show-overflow-tooltip>
            <template slot-scope="scope">{{ getVideoType(scope.row.categoryId) }}</template>
          </el-table-column>
          <el-table-column prop="views" label="播放量" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="targetPerson" label="针对人群" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="goodRate" label="好评比例" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="commentTimes" label="评价次数" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="isHot" label="是否热门视频" width="100" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.isHot?"是":"否" }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="dialogField(scope.row)" type="text" size="small">编辑</el-button>
              <el-button
                @click="applyVideos(scope.row)"
                type="text"
                size="small"
              >{{ operateStatusText(scope.row) }}</el-button>
              <el-button
                @click="hotVideos(scope.row)"
                type="text"
                size="small"
              >{{ scope.row.isHot ? '非热门' : '热门' }}</el-button>
              <el-button @click="delectVideos(scope.row)" type="text" size="small">删除</el-button>
              <el-button @click="showVideoComment(scope.row)" type="text" size="small">视频评论</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="pageChange"
            :total="total"
            :current-page.sync="pageNum"
            :page-sizes="[10, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next"
          ></el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 弹窗 -->
    <div class="popup">
      <el-dialog
        class="dialog"
        :title="editName"
        :visible.sync="dialogFieldBox"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
      >
        <el-form
          class="form"
          :model="video"
          :rules="rules"
          label-position="right"
          label-width="100px"
          ref="form"
        >
          <el-form-item label="视频名称" prop="title">
            <el-input v-model="video.title" />
          </el-form-item>
          <el-form-item class="title" label="视频简介" prop="title">
            <el-input class="textarea" type="textarea" v-model="video.remark" />
          </el-form-item>
          <el-form-item label="针对人群" prop="targetPerson">
            <el-input v-model="video.targetPerson" />
          </el-form-item>
          <el-form-item label="视频图片" prop="imageUrl">
            <singleImgUpload :url.sync="video.imageUrl" dir="video"></singleImgUpload>
          </el-form-item>
          <el-form-item label="视频类型" prop="categoryId">
            <el-select v-model="video.categoryId" placeholder="请选择">
              <el-option
                v-for="item in videoType"
                :key="item.key"
                :label="item.label"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="视频" prop="videoUrl">
            <videoUpload ref="fileRef" v-bind:fileUrl.sync="video.videoUrl"></videoUpload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelClick">取 消</el-button>
          <el-button type="primary" @click="confirmClick">确 定</el-button>
        </div>
      </el-dialog>
      <videoComment v-bind:id="id" v-bind:visible.sync="videoCommentVisable"></videoComment>
    </div>
  </div>
</template>

<script>
import { get, postJson, postXform } from "@/utils/request.js";
import videoUpload from "@/components/common/videoUpload";
import singleImgUpload from "@/components/upload/SingleImgUpload.vue";
import videoComment from "./videoComment";

export default {
  components: { videoUpload, singleImgUpload, videoComment },
  data() {
    return {
      queryParam: {
        status: null,
        title: null,
        categoryId: null,
        isHot: null
      },
      // 分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 页大小
      total: 0, // 数据总条数
      list: [], // 数据列表
      // 弹窗相关属性
      editName: "编辑",
      dialogFieldBox: false,
      // 弹窗数据
      video: {
        id: null,
        title: null,
        categoryId: null,
        imageUrl: null,
        videoUrl: null,
        remark: null,
        targetPerson: null
      },
      // 表单校验
      rules: {
        title: [
          {
            required: true,
            message: "名称不能为空",
            trigger: "blur"
          }
        ]
      },
      // 数据字典
      videoType: [],
      videoStatus: [],
      id: null,
      videoCommentVisable: false
    };
  },
  created() {
    this.ininDict();
    this.getList(this.pageNum, this.pageSize);
  },
  computed: {},
  methods: {
    async ininDict() {
      await get("dict/videoType").then(res => {
        this.videoType = res.data.data;
      });
      await get("videos/videosStatus").then(res => {
        this.videoStatus = res.data.data;
      });
    },
    getVideoType(atype) {
      if (atype) {
        for (let i = 0; i < this.videoType.length; i++) {
          if (this.videoType[i].key === atype) {
            return this.videoType[i].label;
          }
        }
      }
      return "";
    },
    getVideoStatus(status) {
      if (status) {
        for (let i = 0; i < this.videoStatus.length; i++) {
          if (this.videoStatus[i].key === status) {
            return this.videoStatus[i].label;
          }
        }
      }
      return "";
    },
    operateStatusText(row) {
      if (row.status === 1) {
        return "通过审核";
      }
      if (row.status === 2) {
        return "下架";
      }
      if (row.status === 4) {
        return "上架";
      }
    },
    // 分页相关方法
    // 页大小改变时
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 页码改变时
    pageChange(e) {
      // 获取某页数据
      this.pageNum = e;
      this.getList();
    },
    // 获取列表数据
    getList(num, size) {
      get("/videos/pageVideos", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: this.queryParam.status,
        categoryId: this.queryParam.categoryId,
        isHot: this.queryParam.isHot,
        title: this.queryParam.title
      }).then(res => {
        this.list = res.data.data.list;
        // 自定义下标
        this.list.forEach((e, idx) => {
          e.idx = (idx + 1) * this.pageNum;
        });
        this.total = Number.parseInt(res.data.data.total);
        this.pageNum = res.data.data.pageNum;
      });
    },
    applyVideos(row) {
      let url = "/videos/applyVideos";
      if (row.status === 2) {
        url = "/videos/downShelfVideos";
      }
      postXform(url, { id: row.id }).then(res => {
        this.$message({ message: "操作成功", type: "success" });
        this.getList();
      });
    },
    hotVideos(row) {
      let url = "/videos/hotVideos";
      if (row.isHot) {
        url = "/videos/notHotVideos";
      }
      postXform(url, { id: row.id }).then(res => {
        this.$message({ message: "操作成功", type: "success" });
        this.getList();
      });
    },
    // 删除当前视频
    delectVideos(row) {
      this.$confirm("是否删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          postXform("/videos/deleteVideos", { id: row.id }).then(res => {
            this.$message({ message: "删除成功", type: "success" });
            this.getList();
          });
        })
        .catch(() => {});
    },
    resetVideo() {
      return {
        id: null,
        title: null,
        categoryId: null,
        imageUrl: null,
        videoUrl: null,
        remark: null,
        targetPerson: null
      };
    },
    dialogAdd() {
      this.editName = "新增";
      this.video = this.resetVideo();
      let vm = this;
      this.dialogFieldBox = true;
    },
    // 编辑按钮打开编辑字段弹窗
    dialogField(e) {
      this.editName = "编辑";
      this.dialogFieldBox = true;
      this.video = {
        id: e.id,
        title: e.title,
        categoryId: e.categoryId,
        remark: e.remark,
        imageUrl: e.imageUrl,
        videoUrl: e.videoUrl,
        targetPerson: e.targetPerson
      };
    },
    // 确认保存
    confirmClick() {
      const vm = this;
      let param = { ...this.video };
      this.$refs.form.validate(valid => {
        if (valid) {
          let reqUel = "/videos/addVideos";
          if (this.video.id) {
            reqUel = "/videos/updateVideos";
          }
          postXform(reqUel, param).then(res => {
            this.$message({ message: "操作成功", type: "success" });
            this.dialogFieldBox = false;
            this.getList();
            this.video = this.resetVideo();
          });
        } else {
          return false;
        }
      });
    },
    cancelClick() {
      this.dialogFieldBox = false;
      this.$refs.form.clearValidate();
      this.video = this.resetVideo();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      if (formName == "queryParam") {
        this.getList();
      }
    },
    showVideoComment(row) {
      this.id = row.id;
      this.videoCommentVisable = true;
    },
    dialogVideoIsOpen() {
      this.$https.get("videos/getVideoIsOpen", {}).then(res => {
        let jsonData = "";
        if (res.data.data) {
          jsonData = res.data.data;
        }
        this.$prompt("请输入配置(true=开启,false=关闭)", "true=开启,false=关闭", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputValue: jsonData,
          inputPattern: /^true|false$/,
          inputErrorMessage: "格式不正确"
        })
          .then(({ value }) => {
            this.$https
              .postXform("videos/saveVideoIsOpen", { jsonData: value })
              .then(res => {
                this.$message({
                  type: "success",
                  message: "修改成功"
                });
              });
          })
          .catch(() => {});
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/video/video.scss";
</style>
